<template>
  <view class="container">
    <view class="top-layout">
      <image class="top-image"></image>
      <view class="top-info">
        <image class="user-icon" :src="avatarUrl" @click="onUserClick"></image>
        <view style="font-size: small;margin-top: 10px">{{ userInfo.username }}</view>
      </view>
    </view>
    <!-- 功能列表 -->
    <view style="margin-top: 20px">
      <block v-for="(item,index) in myList" :key="index">
        <view class="my-item hor-layout-center" @click="onItemClick(item)">
          <uni-icons class="my-item_icon" :type="item.icon" size="20"></uni-icons>
          <view class="my-item-title">{{ item.title }}</view>
          <uni-icons class="my-item_right" type="arrowright" size="20"></uni-icons>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
import {
  home,
  mexam,
  aboutus
} from "../../router"

export default {
  data() {
    return {
      avatarUrl: require('static/user_icon.png'),
      userInfo: {},
      myList: [{
        title: '我的考试',
        icon: 'paperclip',
        url: mexam
      }, {
        title: '关于我们',
        icon: 'help',
        url: aboutus
      }],
    }
  },
  onLoad() {
    let userInfo = uni.getStorageSync("userInfo")
    this.userInfo = userInfo
    console.log("userInfo", userInfo)
  },
  onShow() {
    if (!this.userInfo) this.toLogin()
  },
  methods: {
    toLogin() {
      uni.showModal({
        title: '提示', content: '当前状态未登陆，去登陆?',
        success: res => {
          if (res.confirm) uni.reLaunch({url: home})
        }
      })
    },
    onItemClick(item) {
      if (!this.userInfo) this.toLogin()
      else uni.navigateTo({url: item.url})
    },
    onUserClick() {
      if (!this.userInfo) this.toLogin()
      else {
        uni.showModal({
          title: "提示",
          content: "确认退出登陆？",
          success: (res) => {
            if (res.confirm) {
              uni.removeStorageSync("userInfo")
              uni.removeStorageSync("userToken")
              uni.reLaunch({
                url: home
              })
            }
          }
        })
      }
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
  background: #F4F4FA;
}

.top-layout {
  /* background-color: #2277f0; */
  background: linear-gradient(#2277f0, #5898f4);
  height: 260px;
  position: relative;
  display: flex;
  flex-direction: row;
}

.top-image {
  bottom: 0px;
  width: 100%;
  height: 100px;
  position: absolute;
  background-image: url('');
}

.top-info {
  position: relative;
  margin: auto;
  margin-top: 85px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.user-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.my-item {
  position: relative;
  background: white;
  height: 44px;
  margin-top: 14px;
}

.my-item_icon {
  color: #A0C3F8;
  font-size: 22px;
  line-height: 22px;
  margin-left: 20px;
}

.my-item-title {
  font-size: 14px;
  margin-left: 10px;
}

.my-item_right {
  height: 30px;
  font-size: 30px;
  line-height: 30px;
  position: absolute;
  right: 20px;
  color: #CBCBCB;
}
</style>
